<!DOCTYPE html>
<html lang="en">
<head>
    <title>USER主页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style type="text/css">
        #manage,#add{
            float: left;
        }
    </style>
</head>
<body>
<hr>

<div id="userapp" class="container">
    <h2 id="manage">用户管理</h2>
    <div id="add" style="padding-left: 50px;padding-top: 20px">
        <button class="btn btn-default" type="button" @click="addModal()">新增</button>
    </div>
    <br>
    <table class="table">
        <tr class="row">
            <th>用户编号</th>
            <th>手机号码</th>
            <th>密码</th>
            <th>电子邮箱</th>
            <th>邀请码</th>
            <th>操作</th>
        </tr>

        <tr v-for="user in users" class="row">
            <th>{{user.id}}</th>
            <th>{{user.tel}}</th>
            <th>{{user.password}}</th>
            <th>{{user.email}}</th>
            <th>{{user.invitation}}</th>
            <th>
                <button class="btn btn-default" type="button" @click="updateModal(user.id)">修改</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-default" type="button" @click="deleteUser(user.id)">删除</button>
            </th>
        </tr>
    </table>
    <div style="text-align: center">
        <ul class="pagination">
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(0)">上页</span>
            </li>
            <li class="page-item ">
                <span  class="page-link" >第{{page}}页</span>
            </li>
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(-1)">下页</span>
            </li>
        </ul>
    </div>


    <!--<nav aria-label="..." style="text-align: center">
        <ul class="pagination">
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(0)">上页</span>
            </li>
            <li class="page-item">
                <span style="cursor: pointer" class="page-link" >当前第{{page}}页</span>
            </li>
            <li class="page-item">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(-1)">下页</span>
            </li>

        </ul>
    </nav>
-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModallable">ADDUSER</h4>
                </div>
                <form @submit.prevent="addUser()">
                    <div class="modal-body">
                        <input type="hidden" name="id" v-model="adduser.id">
                        <div class="form-group">
                            <label class="control-label">TEL:</label>
                            <input type="text" class="form-control" name="tel" v-model="adduser.tel">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PASSWORD:</label>
                            <input class="form-control" name="password" v-model="adduser.password"></input>
                        </div>
                        <div class="form-group">
                            <label class="control-label">EMAIL:</label>
                            <input class="form-control" name="email" v-model="adduser.email"></input>
                        </div>
                        <div class="form-group">
                            <label class="control-label">INVITATION:</label>
                            <input class="form-control" name="invitation" v-model="adduser.invitation"></input>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">UPDATEUSER </h4>
                </div>

                <form  @submit.prevent="updateUser()">
                    <div class="modal-body">

                        <div class="form-group">
                            <label class="control-label">ID:</label>
                            <input type="text" class="form-control" readonly="readonly" name="id"
                                   v-model="upuser.id">
                        </div>
                        <div class="form-group">
                            <label class="control-label">TEL:</label>
                            <input type="text" class="form-control" name="tel" v-model="upuser.tel">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PASSWORD:</label>
                            <input class="form-control" name="password" v-model="upuser.password"></input>
                        </div>
                        <div class="form-group">
                            <label class="control-label">EMAIL:</label>
                            <input class="form-control" name="email" v-model="upuser.email"></input>
                        </div>
                        <div class="form-group">
                            <label class="control-label">INVITATION:</label>
                            <input class="form-control" name="invitation" v-model="upuser.invitation"></input>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script>
    var div1 = new Vue({
            el: '#userapp',
            data: {
                page: 1,
                pages: 0,
                users: [],
                adduser: {id: 0, tel: '', password: '',email: '', invitation: ''},
                upuser: {id: 0, tel: '', password: '',email: '', invitation: ''}
            },
            methods: {
                addModal: function () {
                    $("#addModal").modal('show');
                },
                updateModal: function (id) {
                    for (let x of this.users) {
                        if (x.id == id) {
                            this.upuser.id = x.id;
                            this.upuser.tel = x.tel;
                            this.upuser.password = x.password;
                            this.upuser.email = x.email;
                            this.upuser.invitation = x.invitation;
                        }
                    }
                    $("#updateModal").modal('show');
                },
                updateUser:function() {
                    alert(1);
                    $.ajax({
                        url: '/user',
                        type: 'PUT',
                        data: JSON.stringify(div1.upuser),
                        contentType: 'application/json',
                        success: function (res) {

                            for (let x of div1.users) {
                                if (x.id == res.id) {
                                    x.tel=div1.upuser.tel;
                                    x.password=div1.upuser.password;
                                    x.email=div1.upuser.email;
                                    x.invitation=div1.upuser.invitation;
                                }
                            }
                            $("#updateModal").modal('hide');
                        }
                    })
                },
                addUser: function () {
                    console.log(div1.adduser);
                    $.ajax({
                        url: '/user2',
                        type: 'POST',
                        data: JSON.stringify(div1.adduser),
                        contentType: 'application/json',
                        success: function (data) {
                            div1.users.push(data);
                            $("#addModal").modal('hide');
                        }
                    })
                },
                deleteUser:function (id){
                    $.ajax({
                        url: '/user'+id,
                        type: 'DELETE',
                        success: function (data) {
                            if (data==true) {
                                for (let x of div1.users) {
                                    if (x.id == id){
                                        div1.users.splice(div1.users.indexOf(x),1);
                                    }
                                }
                            }
                        }
                    })
                },
                changePage: function (flag) {
                    if (this.page < this.pages && flag == -1) {
                        this.page = this.page + 1;
                    } else if (this.page > 1 && flag == 0) {
                        this.page = this.page - 1;
                    }
                    $.ajax({
                        url: '/users2',
                        data: {page: div1.page},
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            div1.users = data.list;
                            div1.page = data.pageNum;
                        }
                    })
                }
            }
        }
    );
    //
    //
    //
    // var vm=new Vue({
    //     el: '#userapp',
    //     data: {
    //         page: 1,
    //         pages: 0
    //     },
    //     methods: {
    //         changePage: function (flag) {
    //             if (this.page < this.pages && flag == -1) {
    //                 this.page = this.page + 1;
    //             } else if (this.page > 1 && flag == 0) {
    //                 this.page = this.page - 1;
    //             }
    //             $.ajax({
    //                 url: '/orders',
    //                 data: {page: vm.page},
    //                 type: 'get',
    //                 dataType: 'json',
    //                 success: function (data) {
    //                     div1.users = data.list;
    //                     vm.page = data.pageNum;
    //                 }
    //             })
    //         }
    //     }
    // });

    $(function () {
        $.ajax({
            url: '/users2',
            data: {page: div1.page},
            type: 'GET',
            success: function (data) {
                div1.users = data.list;
                div1.pages=data.pages;
            }
        })
    });
</script>
</body>
</html>
